<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Dashboard') }}  222
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <section class="px-4 sm:px-6 lg:px-4 xl:px-6 pt-4 pb-4 sm:pb-6 lg:pb-4 xl:pb-6 space-y-4">
                    <header class="flex items-center justify-between">
                        <h2 class="text-lg leading-6 font-medium text-black">Projects</h2>
                        <button class="hover:bg-light-blue-200 hover:text-light-blue-800 group flex items-center rounded-md bg-light-blue-100 text-light-blue-600 text-sm font-medium px-4 py-2">
                            <svg class="group-hover:text-light-blue-600 text-light-blue-500 mr-2" width="12" height="20" fill="currentColor">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M6 5a1 1 0 011 1v3h3a1 1 0 110 2H7v3a1 1 0 11-2 0v-3H2a1 1 0 110-2h3V6a1 1 0 011-1z"/>
                            </svg>
                            New
                        </button>
                    </header>
                    <ul class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2 gap-4">
                        <li x-for="item in items">
                            <a :href="item.url" class="hover:bg-light-blue-500 hover:border-transparent hover:shadow-lg group block rounded-lg p-4 border border-gray-200">
                                <dl class="grid sm:block lg:grid xl:block grid-cols-2 grid-rows-2 items-center">
                                    <div>
                                        <dt class="sr-only">Title</dt>
                                        <dd class="group-hover:text-white leading-6 font-medium text-black">
                                            {item.title}
                                        </dd>
                                    </div>
                                    <div>
                                        <dt class="sr-only">Category</dt>
                                        <dd class="group-hover:text-light-blue-200 text-sm font-medium sm:mb-4 lg:mb-0 xl:mb-4">
                                            {item.category}
                                        </dd>
                                    </div>
                                    <div class="col-start-2 row-start-1 row-end-3">
                                        <dt class="sr-only">Users</dt>
                                        <dd class="flex justify-end sm:justify-start lg:justify-end xl:justify-start -space-x-2">
                                            <img x-for="user in item.users" :src="user.avatar" :alt="user.name" width="48" height="48" class="w-7 h-7 rounded-full bg-gray-100 border-2 border-white" />
                                        </dd>
                                    </div>
                                </dl>
                            </a>
                        </li>
                        <li class="hover:shadow-lg flex rounded-lg">
                            <a href="/new" class="hover:border-transparent hover:shadow-xs w-full flex items-center justify-center rounded-lg border-2 border-dashed border-gray-200 text-sm font-medium py-4">
                                New Project
                            </a>
                        </li>
                    </ul>
                </section>
            </div>
        </div>
    </div>


</x-app-layout>
